<template>
  <div class="Echarts">
    <div style="margin-top: 20px">
      <el-row :gutter="20">
        <el-col :span="6"><div id="pie" style="width: 600px;height:400px;"></div></el-col>
        <el-col :span="6"><div style="width: 700px;height:400px;"></div></el-col>
        <el-col :span="12"> <div id="bar" style="width: 600px;height:400px;"></div></el-col>
      </el-row>
    </div>
  </div>

</template>

<script>
export default {
  name: "enrolment"
}
</script>


<script>
export default {
  name: 'Echarts',
  methods:{
    // <!--同合统战系统注册用户党派分布饼图-->
    myEcharts(){
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(document.getElementById('pie'));

      // 指定图表的配置项和数据
      var option = {
        title: {
          text: '云南省党外人士大数据智能管理平台注册用户党派分布',
          subtext: '数据纯属虚构',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: '50%',
            data: [
              {value: 400, name: '中共党员'},
              {value: 88, name: '民革'},
              {value: 197, name: '民盟'},
              {value: 118, name: '民建'},
              {value: 113, name: '民进'},
              {value: 109, name: '农工'},
              {value: 32, name: '致工'},
              {value: 115, name: '九三'},
              {value: 2, name: '台盟'},
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    // <!--同合统战系统注册用户党派人数统计柱状图-->
    myEcharts2(){
      // 基于准备好的dom，初始化echarts实例
      var myChart2 = this.$echarts.init(document.getElementById('bar'));

      // 指定图表的配置项和数据
      var option2 = {
        title: {
          text: '云南省党外人士大数据智能管理平台各党派注册用户数统计',
          textStyle: {
            color: 'black'
          },
        },
        dataset: [{
          dimensions: ['name', 'age', 'profession', 'score', 'date'],
          source: [
            [' 中共党员 ', 600, 'Engineer', 600, '2011-02-12'],
            [' 民革 ', 20, 'Teacher', 88, '2011-03-01'],
            [' 民盟 ', 52, 'Musician', 197, '2011-02-14'],
            ['民建', 37, 'Teacher', 118, '2011-02-18'],
            [' 民进 ', 25, 'Engineer', 113, '2011-04-02'],
            [' 农工', 19, 'Teacher', 109, '2011-01-16'],
            ['致公', 71, 'Engineer', 32, '2011-03-19'],
            [' 九三 ', 36, 'Musician', 115, '2011-02-24'],
            ['台盟 ', 67, 'Engineer', 2, '2011-03-12'],
          ]
        }, {
          transform: {
            type: 'sort',
            config: { dimension: 'score', order: 'desc' }
          }
        }],
        xAxis: {
          type: 'category',
          axisLabel: { interval: 0, rotate: 30 },
        },
        yAxis: {},
        series: {
          type: 'bar',
          itemStyle: {
            normal: {
              label: {
                show: true,		//开启显示
                position: 'top',	//在上方显示
                textStyle: {	    //数值样式
                  color: 'black',
                  fontSize: 12
                }
              }
            }
          },
          encode: { x: 'name', y: 'score' },
          datasetIndex: 1
        }
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart2.setOption(option2);
    }
  },
  mounted() {
    this.myEcharts();
    this.myEcharts2();
  }
}
</script>



<style scoped>

</style>
